//全局指令封装：定义懒加载插件,再在main.js中全局注册即可全局享用
  /*
    1.熟悉指令语法
    2.判断图片是否进入视口
    3.测试图片监听是否生效
    4.如果图片进入视口，发送图片请求
    5.测试图片资源是否发出
    */
import { useIntersectionObserver } from '@vueuse/core'
export const lazyPlug={
  //固定的install方法
  install(app){
    app.directive('img-lazy',{
        mounted(el,binding){
              //el:指令绑定的那个dom元素  （<img>）
              //binding：binding.value 是指令调用时 等于号 后面绑定的  表达式的值  （图片 url）
              const {stop}=useIntersectionObserver(
                el,
                  ([{isIntersecting}]) => {
                  if(isIntersecting){
                    //进入视口区域   （isIntersecting是一个布尔值，代表视口是否进入监听对象）
                    el.src=binding.value
                    stop()
                  }
                },
              )
        }
      }
      )
    }
}
